<script setup lang="ts">
import { ref, onMounted} from 'vue'
import '@/assets/css/index.css'
import { getLunBo, getMainLunBoRight, getCatalogues } from '@/api'
import { router } from '@/router'

// 初始化轮播图数据的引用
const lun_bo = ref([])
//主页面著轮播图右侧的秒杀轮播图
const right_lun_bo = ref([])

// 决定显示闲置物品菜单还是全新菜单
const main_menu_select_background = ref('0')
// 初始化主菜单另一个状态背景颜色的引用
const main_menu_select_background2 = ref('')
// 初始化显示项目索引或标识的引用
const show_item = ref('0')
////用于判断显示哪一个一级分类的具体目录的变量
const thirdth_show_item = ref(false)
const first_show_item = ref("0")



// 一级分类
const menuItems = ref([
])

// 轮播图侧边附加功能
const attachment = ref([
  {
    index: '1',
    label: '客服',
    href: '/',
    src: 'src/assets/img/contactor.svg'
  },
  {
    index: '2',
    label: '会员',
    href: '/',
    src: 'src/assets/img/member.svg'
  },
  {
    index: '3',
    label: '礼品卡',
    href: '/',
    src: 'src/assets/img/gift_card.svg'
  },
  {
    index: '4',
    label: '商城',
    href: '/',
    src: 'src/assets/img/mall.svg'
  }
])



onMounted(() => {
  getLunBos()
  getRightLunBo()
  getMainCatalogues()
})

//获取著轮播图的图片
const getLunBos = async () => {
  const { data } = await getLunBo({ num: "6" })
  lun_bo.value = data.records
}
//获取右侧轮播图
const getRightLunBo = async () => {
  const res = await getMainLunBoRight({ key: 'killactivity' });
  if (res.code === 2000 && res.data !== null) {
    right_lun_bo.value = res.data
  }
}

//决定显示全新物品还是闲置物品的目录
const handleMenuItemClick = (index: string) => {
  // 通过这种方法，我们可以确保设置的值总是符合预期的范围
  // 同时也简化了代码，减少了重复
  if (menuItems.value.some(item => item.id === index)) {
    main_menu_select_background2.value = index;
  }
}

//显示哪一个子目录的隐藏菜单
const handleMenuItemShow = (index: string) => {
  stopTimer()
  thirdth_show_item.value = true
  show_item.value = index
  console.log("hi1")
}

//隐藏菜单
const hiddenMenuItem = () => {
  timer()
  console.log("hi")
}

//用于判断显示哪一个一级分类的具体目录
const show_item_index_change = (index: string) => {
  main_menu_select_background.value = index
  show_item.value = index
}

//获取目录的菜单
const getMainCatalogues = async () => {
  const { data } = await getCatalogues(["全新物品","闲置物品"])
  if (data !== null) {
    menuItems.value = data
    main_menu_select_background.value = data[0].id
  }
}



// 用计时器延迟菜单的隐藏，解决鼠标移入隐藏菜单前，隐藏菜单隐藏的问题
const count_time = ref(0)
let interval: any;
const timer = ()=>{
  interval = setInterval(() => {
    count_time.value++
    if (count_time.value > 0) {
      thirdth_show_item.value = false
      show_item.value = '0'
      clearInterval(interval)
    }
  },100)
}

// 停止计时器,阻止隐藏菜单隐藏
const stopTimer = () => {
  clearInterval(interval)
  count_time.value = 0
}

const toSearchPage = (type:number) => {
  router.push({ path: '/search' ,query:{type:type}})
}

</script>

<template>
  <div class="main_lun">
    <div class="main_lun_center">
      <el-carousel :interval="3000" type="card" height="265px">
        <el-carousel-item v-for="(item, index) in lun_bo" :key="item.id" :index="index">
          <el-link href="#">
            <el-image :src="`${item.url}/${item.name}`" alt="" style="height:100%;width: 100%;min-width: 300px;"
              fit="cover" />
          </el-link>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="main_menu_select_button_background">
      <!-- 一级目录 -->
      <el-menu class="main_menu_select_button" :default-active="first_show_item">
        <div v-for="itemss in menuItems">
          <el-menu-item @click="show_item_index_change(itemss.id)"
            :class="{ 'is-active': main_menu_select_background === itemss.id }">{{ itemss.label }}</el-menu-item>
        </div>

      </el-menu>

      <!-- 二级目录 -->
      <el-menu class="main_menu_select_item" :default-active="first_show_item">
        <div v-for="itemss in menuItems" :key="itemss.id" >
          <div >
            <el-menu-item v-for="items in itemss.children" :key="items.id"
                          v-if="itemss.id == main_menu_select_background"
                          @mouseleave="hiddenMenuItem"
                          @click="handleMenuItemClick(items.id)"
                          :class="{ 'is-active2': main_menu_select_background2 === items.id }"
                          @mouseenter="handleMenuItemShow(items.id)">
              {{ items.value }}
            </el-menu-item>
         </div>
        </div>
      </el-menu>

      <!-- 隐藏模块 -->
      <div class="hidden_menu" @mouseover="stopTimer" @mouseout="timer" v-if="thirdth_show_item">
        <div v-for="itemsss in menuItems" :key="itemsss.id"
             :class="['hidden_menu_fixed_position',{'hidden_menu_first':main_menu_select_background === itemsss.id }]">
            <div v-for="itemss in itemsss.children" :key="itemss.id" style="position: absolute;">
              <div v-if="show_item === itemss.id">
                <div v-for="items in itemss.children">
                  <el-link class="custom-link" :underline="false" href="#">{{ items.value }} &ensp; ></el-link>
                  <el-button v-for="(item, index2) in items.children" :key="index2" class="classify"
                    :underline="false" @click="toSearchPage(items.id)">
                    {{ item.value }}
                  </el-button>
                </div>
              </div>
            </div>
        </div>
      </div>
    </div>

    <div class="right_kill" style="height: 100px;width:400px;position: relative;right: -80%;top:-44%;">
      <div class="main_kill">
        <el-link href="/api" style="width: 100px;height: 100px;float: left;">
          <el-image src="src/assets/img/kill.jpg" fit="cover"></el-image>
        </el-link>

        <el-carousel height="100px" style="width: 200px;" motion-blur indicator-position="none">
          <el-carousel-item v-for="item in right_lun_bo" :key="item.id" style="border-radius: 0;">
            <el-link href="#">
              <el-image :src="`${item.url}/${item.name}`" fit="fill" style="width: 200px;height: 100px;">
              </el-image>
            </el-link>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="attachment" style="height: 110px;width: 300px;display: flex;">
        <el-link href="/api" :underline="false">
          <el-card v-for="item in attachment" :key="item.index" :body-style="{ padding: '0px' }"
            :class="['attachment_hover', item.label]" style="width: 78px;height: 55px;float: left;">
            <el-image :src="item.src" style="width: 30px;height: 30px;left: 24px;" fit="cover"></el-image>
            <p style="font-size:small;line-height:20px;width: 78px;text-align: center;">{{ item.label }}</p>
          </el-card>
        </el-link>
      </div>
    </div>

  </div>
</template>

<style scoped>
.main_lun {
  width: 1698px;
  height: 400px;
  background: url("src/assets/img/304.jpg") no-repeat center center;
  background-size: cover;
}

.main_lun_center {
  position: relative;
  top: 45%;
  left: 45%;
  transform: translateX(-40%) translateY(-40%);
  width: 55%;
  min-width: 800px;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.main_menu_select_button_background {
  position: absolute;
  left: 20px;
  top: 60px;
  display: flex;
}

.main_menu_select_button {
  position: relative;
  left: 5px;
  top: -67.5%;
  background-color: #99a9bf;
  width: 50px;
  border-radius: 10px;
}

.main_menu_select_button .el-menu-item {
  writing-mode: vertical-lr;
  height: 200px;
  font-size: larger;
  padding-top: 35px;
  width: 100%;
}

.is-active {
  border-radius: 10px;
  background-color: #94d3fa;
}

.is-active2 {
  border-radius: 0;
  background-color: #94d3fa;
}

.main_menu_select_item {
  position: relative;
}

.main_menu_select_item .el-menu-item {
  height: 50px;
}

.hidden_menu {
  position: absolute;
  left: 145px;
  width: 1000px;
  height: 400px;
  background-color: #f9fbfc;
  border-radius: 0 10px 10px 0;
  overflow: auto;
}

.hidden_menu::-webkit-scrollbar {
  display: none;
}

.hidden_menu_first{
  z-index: 20;
}

.hidden_menu_fixed_position {
  width: 100%;
  height: 100%;
  position: absolute;
}

.custom-link {
  cursor: pointer;
  font-size: large;
  padding-right: 20px;
}

.classify {
  font-size: inherit;
  padding-right: 15px;
  height: 30px;
  border: none;
}

.el-card, .attachment {
  background-color: transparent !important;
}

.attachment_hover:hover {
  background-color: #94d3fa !important;
  color: coral;
}
</style>